<template>
    <div id="slave">
        <el-container class="is-vertical">
            <el-container>
                <side-bar class="sidebar-container"></side-bar>
                <el-container class="is-vertical">
                    <header-bar></header-bar>
                    <nav-bar></nav-bar>
                    <app-main> </app-main>
                    <footer-bar></footer-bar>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import store from '@/vuex/index';
import { SideBar, footerBar, AppMain, NavBar, HeaderBar, companyInfo } from './components';
@Component({
    components: {
        SideBar,
        footerBar,
        AppMain,
        NavBar,
        HeaderBar,
        companyInfo,
    },
})
export default class home extends Vue {
    public sysName: string = '';
    public collapsed: boolean = false;
    public sysUserName: string = '';
    public sysUserAvatar: string = '';
    public form: {
        name: '';
        region: '';
        date1: '';
        date2: '';
        delivery: false;
        type: null;
        resource: '';
        desc: '';
    };

    public $refs: {
        menuCollapsed: HTMLFormElement;
    };
    created() {
        this.sysUserAvatar = '/static/logo.ico';
    }
    onSubmit() {}

    //折叠导航栏
    public collapse = function () {
        this.collapsed = !this.collapsed;
    };
    public showMenu(i, status) {
        let element: any = this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-' + i)[0];
        element.style.display = status ? 'block' : 'none';
    }
}
</script>

<style lang="scss">
/* 主题颜色 */
// @import '../../style/element-theme.scss';
#slave {
    width: 100%;
    height: 100%;
    background: #f3f4f6;
    color: #fff;
    .el-container {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .el-header {
        text-align: center;
        line-height: 70px !important;
        padding-left: 0 !important;
        height: 70px !important;
        background-color: $red;
        color: #fff;
        display: flex;
        justify-content: space-between;
        .logo {
            font-size: 22px;
            height: 100%;
            line-height: 70px;
        }
        .el-dropdown {
            color: #fff;
            height: 100%;
        }
    }

    .el-aside {
        // background-color: #545c64;
        color: #333;
        text-align: center;
        line-height: 180px;
    }

    .el-main {
        background-color: #f2f2f2;
        color: #333;
        width: 100%;
        height: 100%;
        padding: 10px;
        overflow: hidden;
        .content-container {
            width: 100%;
            height: 100%;
            .grid-content,
            .content-wrapper {
                width: 100%;
                height: 100%;
            }
        }
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container .el-aside {
        line-height: 320px;
    }
    .el-menu {
        border-right: none !important;
    }

    .el-row {
        .userinfo {
            text-align: right;
            padding-right: 35px;
            float: right;
        }
    }
    .el-submenu {
        .el-menu-item {
            min-width: 0 !important;
            user-select: none;
            padding-left: 58px !important;
        }
    }
    .menu-expanded.nocollapsed {
        // padding:0 20px;
    }
    .menu-expanded {
        .el-menu {
            background-color: #545c64;
        }
        .el-submenu__icon-arrow {
            right: 0;
            margin-top: -4px;
        }
        //  border-radius: 0 20px 0 0!important;
        background-color: #1f2942 !important;
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
    }
    .el-menu-vertical-demo {
        height: 74%;
        overflow: hidden;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 198px;
    }

    .el-menu i {
        vertical-align: middle;
        width: 24px;
        text-align: center;
        display: inline-block;
        margin-right: 10px;
        color: #bdbdbd;
    }
    .el-menu-item.is-active i {
        color: #fff;
    }
    .el-menu.el-menu--collapse {
        margin: 0 10px;
    }
    .el-menu.el-menu--collapse i {
        margin: 0;
        padding: 0;
    }
    .el-menu.el-menu--collapse i.el-submenu__icon-arrow {
        margin-top: -4px;
    }
    .el-footer {
        font-size: 14px;
        color: #666666;
        letter-spacing: 0;
        text-align: center;
        height: 30px !important;
        line-height: 30px;
        background-color: #f2f2f2;
        border-top: 1px solid #dcdfe6;
        text-align: left;
    }
    .el-menu-item:hover {
        // background-color: #1F2942!important;
        // color:#1F2942!important;
        // margin:0 10px;
        // border-radius: 6px!important;
        // i{
        //     color:#1F2942!important;
        // }
    }
    .el-menu-item.is-active {
        // border-radius: 6px!important;
        // height:40px!important;
        background-color: #0c1323 !important;
        color: #fff !important;
        border-right: 3px solid $red;
    }

    .avatars {
        height: 70px;
        line-height: 70px;
        width: 100%;
        background: $red;
        .avatarImg {
            width: 100%;
            text-align: center;
            font-size: 24px;
            margin: 0 auto;
            letter-spacing: 2px;
            img {
                width: 42px;
                height: 42px;
                vertical-align: middle;
            }
        }
        p {
            text-align: center;
            color: #fff;
            font-size: 12px;
        }
    }

    .el-submenu__title {
        background: #fff;
    }
    .el-submenu__icon-arrow {
        margin-top: 7px;
    }

    .logoOut {
        // color:#fff;
        // color:#0D3B9C;
        // font-size:16px;
        font-weight: bold;
        cursor: pointer;
        text-align: center;
        i {
            margin-right: 10px;
        }
    }
    // .logoOut:hover{
    //     color:rgb(97, 142, 238);
    // }

    .el-submenu__title,
    .el-menu-item {
        height: 48px;
        line-height: 48px;
        transition: none !important;
        color: #bdbdbd !important;
    }

    .box-card .clearfix {
        color: #506b94;
        font-size: 14px;
        font-weight: bold;
    }

    .iconStyle i {
        cursor: pointer;
        margin: 0 5px;
        color: #b7c3d7;
    }
    .iconStyle i:hover {
        color: #4185ff;
    }
}
</style>
